<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/jinshi/layui/css/layui.css">
    <!--引入JS-->

    <title>Title</title>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">
        切片上传
    </div>
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">选择文件</label>
                <div class="layui-input-inline" style="width: 70%">
                    <input class="layui-input"  readonly type="text" id="path" placeholder="请选择文件">
                </div>
                <div class="layui-input-inline">
                    <div id="picker">选择文件</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传进度</label>
                <div class="layui-input-block" style="height: 36px">
                    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" style="top: 50%;
    transform: translateY(-50%);">
                        <div class="layui-progress-bar" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-danger" id="ctlBtn" type="button">开始上传</button>
                    <button class="layui-btn layui-btn-primary" id="back" type="button">返回</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/global/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
<script>
    var layer = layui.layer;
    var element = layui.element;
    var fileMd5,ext;
    var chunks; // 续传已经存在在服务器上切片;
    var is_upload;
    WebUploader.Uploader.register({
        "before-send-file":"beforeSendFile",//整个文件上传前
        "before-send":"beforeSend",  //每个分片上传前
        "after-send-file":"afterSendFile",  //分片上传完毕
    },{
        beforeSend: function (block) {
            if (is_upload == "true") {
                var deferred = WebUploader.Deferred();
                $.ajax({
                    type: "GET",
                    url: "{:url('checkChunk')}",
                    data: {
                        //文件唯一标记
                        md5: fileMd5,
                        //当前分块下标
                        chunk: block.chunk,
                        //当前分块大小
                        chunkSize: block.end - block.start
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 1) {
                            //分块存在，跳过
                            console.log(block.chunk + "reject");
                            deferred.reject();
                        } else {
                            //分块不存在或不完整，重新发送该分块内容
                            console.log(block.chunk + "resolve");
                            deferred.resolve();
                        }
                    }
                });
                return deferred.promise();
            }
        }
    });
    var uploader = WebUploader.create({

        // swf文件路径
        swf: '/static/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: '{:url("chunkUpload")}',
        extensions: 'jpg,png,bmp,gif,rar,zip,gz,mp4,avi,mp3,mov,flv,mpeg,doc,docx,pdf',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: "#picker",
        },
        formData: {
        },
        chunked: true, //是否要分片处理大文件上传
        chunkSize: 5*1024*1024, //分片上传，每片2M，默认是5M
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    var load ;
    uploader.on( 'fileQueued', function( file ) {
        load = layer.load(1,{
            shade: [0.1,'#000']
        });
        uploader.md5File(file,0,10*1024*1024)
            .progress(function (percentage) {
                $("#path").val("获取文件信息中……"+(percentage * 100).toFixed(2) + '%');
            })
            .then(function (val) {
                $("#path").val(file.name + " 等待上传");
                layer.closeAll();
                var formData = uploader.option("formData");
                formData.md5 = val;
                formData.ext = file.ext;
                uploader.option("formData",formData);
                fileMd5 = val;
                ext = file.ext;
                $.post('{:url("checkMd5")}',{md5:val}, function (res) {
                    if (res.code == 1) { // 已经上传过
                        is_upload = "true"
                    }  else {
                        is_upload = "false"
                    }
                })
            })
    });
    uploader.on( 'uploadProgress', function( file, percentage ) {
        element.progress('demo', (percentage * 100).toFixed(2) + '%');
    });
    uploader.on('uploadSuccess', function (file,res) {
        console.log(file,res)
        layer.msg("处理中",{shade: [0.1,'#000'],icon:16,time:9999999});
        $.post("{:url('mergeChunk')}",{md5:fileMd5,ext:ext,type:file.type,name:file.name,size:file.size}, function (res1) {
            layer.closeAll();
            if (res1.code == 1) {
                $("#path").val(res1.data.path);
                layer.msg("上传成功",{time:500},function (){
                    parent.active.inVideo(res1.data.path,"1")
                    parent.layer.closeAll()
                });
            } else  {
                layer.alert("上传失败")
            }
        })
    });
    uploader.on('uploadAccept',function (file,res) {
        if (res.code == 0) {
            layer.alert(res.msg)
            return false;
        }
    });
    $("#ctlBtn").click(function () {
        uploader.upload();
    })
    $("#back").click(function () {
        layer.load();
        uploader.stop();
        setTimeout(function (){
            parent.layer.closeAll();
        },1000)
    })
</script>
</html>